<!--
 * @description: 首页
 * @author: huangpeng
 * @date: 2023年06月23日 12:00
 * @Copyright:  2022-2023
!-->
<template>
  <div>
    <div class="main-container">
      <div class="carousel-container">
        <Carousel />
      </div>
      <div class="anchor-container">
        <Anchor @handleTabClick="handleTabClick" />
      </div>
      <div class="article-list-right-container">
        <ArticleList :activeTab="activeTab" />
        <RightPanel />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import RightPanel from "../rightPanel/index.vue";
import Carousel from "./carousel/index.vue";
import ArticleList from '../article/list/index.vue'
import Anchor from './anchor/index.vue'

@Component({
  components: {
    Carousel,
    Anchor,
    ArticleList,
    RightPanel
  }
})
export default class index extends Vue {

  /** 当前tab */
  private activeTab: string = 'recommend';

  private mounted() {
    this.$nextTick(() => {
      const el:any = document.getElementById('layout-container');
      el.scrollTop = 0;
    })
  }

  /** Anchor变更 */
  private handleTabClick(tab: string) {
    this.activeTab = tab;
  }
}
</script>
<style scoped lang="scss">
.main-container {
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.carousel-container {
  width: 100%;
  margin: auto;
}
.article-list-right-container {
  width: 100%;
  margin: 20px 0 0 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media only screen and (min-width: 850px) and (max-width: 1300px){
  .live2d-widget-container {
    opacity: 0.5 !important;
  }
  .article-list-right-container {
    flex-direction: column !important;
  }
}
@media only screen and (max-width: 850px) {
  .main-container {
    width: 100%;
    flex-direction: column;
  }
  .carousel-container {
    width: 100%;
    margin: 0 !important;
  }
  .article-list-right-container {
    flex-direction: column !important;
  }
  .live2d-widget-container {
    opacity: 0.5 !important;
  }
}
</style>
